<form (ngSubmit)="query()" [formGroup]="searchForm" class="search-area" fxLayoutGap="16px">
  <mat-form-field floatLabel="never">
    <mat-select [placeholder]="'workshop'|translate" formControlName="workshopId" required>
      <mat-option *ngFor="let workshop of workshops$|async" [value]="workshop.id">
        {{workshop.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div class="mat-form-field" style="width: 300px;">
    <input [formControl]="rangeCtrl" [max]="maxDate" [owlDateTimeTrigger]="rangePicker" [owlDateTime]="rangePicker" [placeholder]="('Common.startDate'|translate)+' ~ '+('Common.endDate'|translate)" matInput readonly required selectMode="range">
    <owl-date-time #rangePicker></owl-date-time>
  </div>

  <button [disabled]="searchForm.invalid" color="primary" mat-icon-button tabindex="-1">
    <mat-icon>search</mat-icon>
  </button>

  <span fxFlex></span>
  <button (click)="download()" mat-mini-fab tabindex="-1" type="button">
    <mat-icon>get_app</mat-icon>
  </button>
</form>

<mat-divider></mat-divider>

<div fxFlex style="overflow: auto;width: 100vw;">
  <table [dataSource]="items$" fxFlex mat-table>
    <ng-container matColumnDef="product" sticky>
      <th *matHeaderCellDef mat-header-cell>{{'product'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.product.name}}</td>
    </ng-container>

    <ng-container matColumnDef="line" sticky>
      <th *matHeaderCellDef mat-header-cell>{{'line'|translate}}</th>
      <td *matCellDef="let row" mat-cell>
        <ng-container *ngIf="!row.productSum">
          {{row.line?.name}}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="batchNo" sticky>
      <th *matHeaderCellDef mat-header-cell>{{'batchNo'|translate}}</th>
      <td *matCellDef="let row" mat-cell>
        <ng-container *ngIf="!row.productSum">
          {{row.batch.batchNo}}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="batchSpec" sticky>
      <th *matHeaderCellDef mat-header-cell>{{'Batch.spec'|translate}}</th>
      <td *matCellDef="let row" mat-cell>
        <ng-container *ngIf="!row.productSum">
          {{row.batch.spec}}
        </ng-container>
      </td>
    </ng-container>

    <ng-container *ngFor="let silkException of silkExceptions$|async" matColumnDef="{{silkException.id}}">
      <th *matHeaderCellDef class="silk-exception" mat-header-cell>{{silkException.name}}</th>
      <td *matCellDef="let row" class="silk-exception" mat-cell>{{silkExceptionCount(row, silkException)}}</td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns$|async; sticky: true" mat-header-row></tr>
    <tr *matRowDef="let row; columns: displayedColumns$|async;" [class.line-sum]="row.productSum" mat-row></tr>
  </table>
</div>
